<template>
  <view class="inbound-container">
    <!-- 搜索栏及两侧按钮 -->
    <view class="custom-card">
      上架单号：XXXXXXXXXXXXXXXXXXXXX
    </view>
    <view class="custom-card">
      <view class="location-row" @click="onShowLocation">
        <u-input v-model="form.location_code" placeholder="请选择库位或扫码" readonly class="location-input" />
        <u-icon name="scan" size="38" color="#2979ff" class="location-scan-icon" @click.stop="onScanLocation" />
      </view>
      <!-- 多选库位弹窗 -->
      <location-pop :show="showLocationPicker" @update:selectedIds="selectedLocationIds = $event"
        @close="showLocationPicker = false" @confirm="onLocationMultiConfirm"
        :locationList="locationList"></location-pop>
    </view>
    <view class="custom-card">
      <u-form :model="form" ref="uForm">
        <u-form-item label="SKU" label-width="40">
          <u-input v-model="form.sku_code" placeholder="请输入/扫描产品条码" style="margin-right: 5px;">
            <template #prefix>
              <u-icon name="scan" size="24" color="#2979ff" class="location-scan-icon" />
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="数量" label-width="40">
          <u-input v-model="form.sku_qty" placeholder="数量" style="margin-right: 5px;">
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="custom-card">
      <view class="card-title">上架记录</view>
      <u-empty v-if="boxes.length === 0" text="暂无上架" mode="list"></u-empty>
      <u-cell-group v-else :border="false">
        <u-cell v-for="(item, idx) in boxes" :key="idx" :title="item.code"
          :label="`库位：${item.location_code} SKU: ${item.sku_code || '-'} 数量: ${item.sku_qty || '-'}`">
        </u-cell>
      </u-cell-group>
    </view>

    <view class="bottom-bar">
      <u-button type="primary" @click="addBarcode" :ripple="true" shape="circle" text="保存并扫描下一件"></u-button>
    </view>
  </view>
</template>

<script>
import api from "@/api"
const INBOUND_CODE = {
  PEDDING: 110,
  IN: 120
}
import LocationPop from "../../components/LocationPop.vue"
export default {
  components: {
    LocationPop,
  },
  data() {
    return {

      // 库位
      showLocationPicker: false,
      selectedLocationIds: [],
      locationList: [],
      boxes: [],
      form: {

      }
    }
  },
  onLoad() {
  },
  onPullDownRefresh() {
  },
  methods: {
    // 库位
    onLocationMultiConfirm() {
      // 多选库位确认
      const selected = this.locationList.filter(l => this.selectedLocationIds.includes(l.guid))
      this.form.location_code = selected.map(l => l.location_code).join(', ')
      this.showLocationPicker = false
    },
    async onShowLocation() {
      this.showLocationPicker = true;
      this.locationList = [];
      const res = await api.wms.locationApi("locationList", {
        data: {
          guid_warehouse: "dc95299b-f8ff-4e0f-8481-60d32e1da83a"
        }
      })
      this.locationList = res.data.data;
    },
    // 加载订单列表
    async loadOrderList(isLoadMore = false) {
      if (this.loading) return

      this.loading = true
      if (!isLoadMore) {
        this.page = 1
        this.orderList = []
      }

      try {
        // 模拟API调用
        const params = {
          page: {
            current: this.page,
            size: this.pageSize,
          },
          data: {
            task_status: 'TASK_PENDING',
            status_code: this.filterStatus
          }
        }

        // 模拟数据
        const res = await api.inbound.getInboundList('selectPutAwayTask', params)
        this.orderList = this.orderList.concat(res.data.data);

        this.hasMore = Boolean(res.data.data?.length);
        this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'

        if (isLoadMore) {
          this.page++
        }

      } catch (error) {
        console.error('加载订单列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    // 订单点击
    async onOrderClick(item) {
      if (!this.searchKeyword) {
        uni.$u.toast("请选择库位")
        return;
      }
      await api.inbound.getInboundList('putSale', {
        data: {
          guid: item.guid,
          actual_location: this.searchKeyword
        }
      })
      this.searchKeyword = "";
      uni.showToast("操作成功");
      this.refreshData();
    },
    addBarcode() {
      if (!this.form.location_code) {
        uni.$u.toast("请选择库位")
        return
      }
      if (!this.form.sku_code) {
        uni.$u.toast("请选择SKU条码")
        return
      }
      if (!this.form.sku_qty) {
        uni.$u.toast("请填写SKU数量")
        return
      }

      this.boxes.push(Object.assign({}, this.form));
      Object.assign(this.form, {
        location_code: null,
        sku_code: null,
        sku_qty: null
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inbound-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
  padding: 20rpx;
}

.custom-card {
  margin-bottom: 10rpx;
}

// 搜索区域
.search-row {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 20rpx 0 20rpx;

  .search-box-flex {
    flex: 1;
  }

  .icon-btn {
    border-radius: 50%;
    padding: 0 !important;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

// tabs页签
.tabs-section {
  background: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.location-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  width: 100%;
}

.location-input {
  flex: 1;
  min-width: 0;
}

.location-scan-icon {
  margin-left: 6rpx;
  cursor: pointer;
  transition: color 0.2s;
}

.location-scan-icon:active {
  color: #1656a0;
}

.bottom-bar {
  position: fixed;
  bottom: 10rpx;
  left: 0;
  width: 100%;
  padding: 8rpx 10rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  gap: 10rpx;
}
</style>